<template>
  <!-- 就诊人组件的静态结构 -->
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>就诊人管理</span>
        <el-button class="button" type="primary" :icon="User" @click="addUser"
          >添加就诊人</el-button
        >
      </div>
    </template>
    <!-- 添加就诊人 -->
    <div class="form">
      <el-divider content-position="left">就诊人信息</el-divider>
      <el-form style="width: 60%; margin: 10px auto">
        <el-form-item label="用户姓名">
          <el-input
            placeholder="请你输入用户姓名"
            v-model="userParams.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input
            placeholder="请你输入证件号码"
            v-model="userParams.certificatesNo"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input
            placeholder="请你输入用户手机号码"
            v-model="userParams.phone"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-form style="width: 60%; margin: 10px auto" label-width="80">
        <el-form-item>
          <el-button type="primary" size="default" @click="submit"
            >提交</el-button
          >
          <el-button type="primary" size="default" @click="reset"
            >重写</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script setup lang="ts">
//@ts-ignore
import type { CascaderProps } from "element-plus";
import { User } from "@element-plus/icons-vue";
import { onMounted, ref, reactive, watch } from "vue";
//引入路由器与路由方法
import { useRouter, useRoute } from "vue-router";
let $route = useRoute();
let $router = useRouter();
import { addpatient } from "@/api/index.js";
//@ts-ignore
import { ElMessage } from "element-plus";
//存储全部就诊人的信息
let userArr = ref([]);
//收集新增就诊人的数据
let userParams = reactive({
  certificatesNo: "",
  name: "",
  phone: "",
});
//添加就诊人按钮的回调
const addUser = () => {
  //清空上一次的数据
  reset();
};
//就诊人子组件自定义事件的回调
const changeScene = (user) => {
  //收集已有的就诊人信息
  Object.assign(userParams, user);
};

const reset = () => {
  Object.assign(userParams, {
    certificatesNo: "",
    name: "",
    phone: "",
  });
};

//提交按钮的方法的回调
const submit = async () => {
  //要么新增就诊人|更新一个已有的就诊人
  try {
    //要么新增用户成功|更新已有的用户成功
    await addpatient(userParams);
    //提示文字
    ElMessage({
      type: "success",
      message: "添加成功",
    });
    $router.back();
    //在获取全部的就诊人的信息
    // getAllUser();
  } catch (error) {
    ElMessage({
      type: "success",
      message: "添加失败",
    });
  }
};
//子组件自定义事件:删除按钮触发
const removeUser = () => {
  //再次获取全部的就诊人的信息
  getAllUser();
};
</script>

<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.visitors {
  display: flex;
  flex-wrap: wrap;

  .item {
    width: 32%;
    margin: 5px;
  }
}
</style>
